<template>
	 <div class="shopcart-container">
		<!-- 收货地址区域 -->
		<van-cell title="收货地址" is-link :to="{name:'addressList',query:{addressId:address.id || 9999999999}}">
			<template #label>
				<van-row>姓名：{{address.name}}</van-row>
				<van-row>电话：{{address.tel}}</van-row>
				<van-row>地址：{{address.city+address.county+address.address_detail}}</van-row>
			</template>
		</van-cell> 

		<!--商品列表-->
		<van-card v-for="item in goodsList" :key="item.id" :num="item.count" :price="item.price.toFixed(2)" :title="item.name"
			:desc="item.title" :thumb="item.pic" />

		<!--配送信息-->
		<van-cell title="配送服务" label="快递运输,工作日、双休日与节假日均可送货" />

		<van-field v-model="remark" rows="2" autosize label="订单备注" type="textarea" placeholder="请输入订单备注" />

		<!--运费信息-->
		<van-cell title="商品金额" :value="`¥${amount.toFixed(2)}`" />
		<van-cell title="运费" :value="`¥0.00`" />
		<van-cell title="总价" :value="`¥${amount.toFixed(2)}`" />
		<!--创建订单按钮-->
		<van-button @click="OnClickCreateOrder" size="large" type="primary">创建订单</van-button>
		 
	</div>
</template>

<script>
	import { showToast } from 'vant';
	import { createOrderAPI } from "@/api/order.js";
	import { getDefaultAddressAPI, getAddressDetailByIdAPI } from "@/api/address.js";
	import { getCartListCheckedAPI } from "@/api/cart.js";
	export default {
		data() {
			return {
				goodsList: [],
				remark: "",
				amount: 0,
				address: {},
				APIDomainName: import.meta.env.VITE_APIDomainName || '/', // 接口域名
			};
		},

		created() {
			// 检查是否有勾选的商品
			this.initCartListByChecked(); //初始订单商品（购物车勾选商品）
			// 处理地址：优先使用路由参数，否则使用默认地址
			this.initAddress();
		},
		
		// 监听路由变化，当从地址列表返回时刷新地址信息
		watch: {
			'$route.query.addressId'(newVal) {
				if (newVal) {
					this.initAddressById(newVal);
				}
			}
		},
		
		// 页面激活时也检查地址
		activated() {
			if (this.$route.query.addressId) {
				this.initAddressById(this.$route.query.addressId);
			}
		},
		
		methods: {
			// 初始化地址（统一处理地址初始化逻辑）
			initAddress() {
				if (this.$route.query.addressId) {
					//通过路由名 addressList 转来的
					this.address.id = this.$route.query.addressId;
					this.initAddressById(this.$route.query.addressId);
				} else {
					this.initDefaultAddress(); //初始默认收货地址
				}
			},
			//初始订单商品（购物车勾选商品）
			initCartListByChecked() {
				getCartListCheckedAPI().then(result => {
					if (result.data && result.data.length > 0) {
						// 映射购物车数据字段到订单页面需要的字段格式
						this.goodsList = result.data.map(item => {
							// 确保 product_id 正确映射（支持多种字段名）
							const productId = item.productId || item.product_id;
							const price = parseFloat(item.productPrice || item.price || 0);
							const count = parseInt(item.count || 0);
							
							return {
								id: item.id,
								product_id: productId,
								productId: productId, // 保留两个字段名以防万一
								name: item.productName || item.productTitle || item.name || '',
								title: item.productSpec || item.productTitle || item.title || '',
								pic: item.productPic || item.pic || '',
								price: price,
								count: count
							};
						}).filter(item => {
							// 过滤掉无效的商品项
							return item.product_id && item.count > 0 && item.price > 0;
						});
						
						if (this.goodsList.length === 0) {
							showToast("购物车中没有有效的商品");
							setTimeout(() => {
								this.$router.push({ name: "cart" });
							}, 1500);
							return;
						}
						
						this.amount = 0;
						this.goodsList.forEach((item) => {
							this.amount += item.count * item.price;
						});
						
						console.log("购物车商品列表:", this.goodsList); // 调试用
					} else {
						this.goodsList = [];
						this.amount = 0;
						showToast("购物车中没有勾选的商品");
						// 如果没有勾选商品，返回购物车页面
						setTimeout(() => {
							this.$router.push({ name: "cart" });
						}, 1500);
					}
				}).catch((error) => {
					showToast("获取购物车数据失败");
					console.error("获取购物车数据失败:", error);
					this.goodsList = [];
					this.amount = 0;
				});
			},
			//初始默认收货地址
			initDefaultAddress() {
				getDefaultAddressAPI(this.address.id).then(result => {
					if (result.data && result.data.length > 0) {
						this.address = result.data[0];
					} else {
						//如果没有默认收货地址，显示提示信息，但不强制跳转
						//用户可以通过点击地址区域手动选择地址
						this.address = {
							id: null,
							name: "请选择收货地址",
							tel: "",
							city: "",
							county: "",
							address_detail: "点击选择收货地址"
						};
						showToast("请选择收货地址");
					}
				}).catch(() => {
					// 如果获取地址失败，也显示提示
					this.address = {
						id: null,
						name: "请选择收货地址",
						tel: "",
						city: "",
						county: "",
						address_detail: "点击选择收货地址"
					};
				});
			},
			
			// 根据ID获取地址信息
			initAddressById(addressId) {
				if (!addressId || addressId === 9999999999) {
					this.initDefaultAddress();
					return;
				}
				// 使用获取地址详情的接口
				getAddressDetailByIdAPI(addressId).then(result => {
					if (result.data) {
						this.address = {
							id: result.data.id,
							name: result.data.name || "",
							tel: result.data.tel || "",
							city: result.data.city || "",
							county: result.data.county || "",
							address_detail: result.data.addressDetail || result.data.address_detail || ""
						};
					} else {
						this.initDefaultAddress();
					}
				}).catch(() => {
					this.initDefaultAddress();
				});
			},

			//处理创建订单
			OnClickCreateOrder() {
				// 验证是否有商品
				if (!this.goodsList || this.goodsList.length === 0) {
					showToast("请先选择要购买的商品");
					return;
				}
				
				// 验证是否有收货地址
				if (!this.address || !this.address.id) {
					showToast("请先选择收货地址");
					// 跳转到地址列表页面选择地址
					this.$router.push({
						name: "addressList",
						query: { addressId: 9999999999 }
					});
					return;
				}
				
				// 构建商品列表，过滤掉无效的商品项
				let productList = [];
				this.goodsList.forEach((item) => {
					// 确保 product_id 存在且有效
					const productId = item.product_id || item.productId;
					const count = parseInt(item.count) || 0;
					const price = parseFloat(item.price) || 0;
					
					if (productId && count > 0 && price > 0) {
						// 构建商品项，字段名与后端 OrderItemInsertForm 完全匹配
						// OrderItemInsertForm: productId(Long), count(Long), price(BigDecimal)
						productList.push({
							productId: Number(productId),  // 商品ID，对应后端 productId（支持别名 goods_id, goodsId）
							count: Number(count),  // 数量，对应后端 count (Long)
							price: Number(price),  // 价格，对应后端 price (BigDecimal)
						});
					} else {
						console.warn("跳过无效商品项:", item);
					}
				});

				// 验证商品列表是否为空
				if (productList.length === 0) {
					showToast("订单项列表不能为空，请检查商品信息");
					console.error("商品列表数据:", this.goodsList);
					console.error("过滤后的商品列表:", productList);
					return;
				}

				//根据接口文档，准备接口参数
				// Java 后端 OrderInsertForm 期望的字段：
				// - addressId (支持 address_id 别名)
				// - orderItemList (支持 goods_list, goodsList, orderItemList, order_item_list 别名)
				// - remark
				let params = {
					addressId: Number(this.address.id),  // 地址ID
					orderItemList: productList,  // 订单项列表（后端期望的字段名）
					remark: this.remark || "",
				};
				
				console.log("创建订单参数:", JSON.stringify(params, null, 2)); // 调试用
				console.log("商品列表详情:", productList); // 调试用
				
				createOrderAPI(params).then(result => {
					// 后端返回 R<Long>，result.data 是订单ID
					const orderId = result.data;
					if (orderId && orderId > 0) {
						showToast(result.msg || "订单创建成功");
						//创建成功后导航到订单列表页面
						setTimeout(() => {
							this.$router.push({ name: "orderlist" });  // 路由名称应为 orderlist（小写）
						}, 1000);
					} else {
						showToast("订单创建失败，请重试");
					}
				}).catch((error) => {
					const errorMsg = error?.response?.data?.msg || error?.message || "创建订单失败，请重试";
					showToast(errorMsg);
					console.error("创建订单失败:", error);
					console.error("请求参数:", params);
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	// 定义主题色变量（与其他页面保持一致）
	@mainColor: #8b4513; // 棕色主题色
	@bgColor: #f9f5ed; // 米黄色背景
	@lightBrown: #f5e8d0; // 浅棕色
	@darkBrown: #5a4a42; // 深棕色

	.shopcart-container {
		display: flex;
		flex-direction: column;
		background: @bgColor;
		overflow: hidden;
		padding-top: 46px;
		min-height: 100vh;
		padding-right: 20px;
	}

	// 收货地址单元格样式
	/deep/ .van-cell {
		background-color: white;
		margin: 10px;
		border-radius: 8px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
		border-left: 4px solid @mainColor; // 左侧主题色标识线
		
		&:last-child {
			margin-bottom: 20px;
		}
		
		.van-cell__title {
			color: @darkBrown;
			font-weight: 500;
		}
		
		.van-cell__label {
			color: #666;
		}
		
		// 链接箭头颜色
		.van-icon-arrow {
			color: @mainColor;
		}
	}

	// 商品卡片样式
	/deep/ .van-card {
		margin: 10px;
		border-radius: 8px;
		background-color: white;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
		border: 1px solid #f0e8d9;
		
		.van-card__title {
			font-size: 16px;
			color: @darkBrown;
		}
		
		.van-card__desc {
			color: #666;
		}
		
		.van-card__price {
			color: #e53935;
			font-weight: bold;
		}
	}

	// 输入框样式
	/deep/ .van-field {
		margin: 10px;
		background-color: white;
		border-radius: 8px;
		padding: 5px 10px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
		
		.van-field__label {
			color: @darkBrown;
		}
		
		textarea {
			border: 1px solid @lightBrown;
			border-radius: 4px;
			padding: 5px;
		}
	}

	// 按钮样式
	/deep/ .van-button--primary {
		background-color: @mainColor;
		border-color: @mainColor;
		color: white;
		margin: 15px 10px;
		border-radius: 8px;
		font-size: 16px;
		height: 48px;
		
		&:active {
			background-color: darken(@mainColor, 10%);
			border-color: darken(@mainColor, 10%);
		}
	}

	// 总价文字样式
	/deep/ .van-cell__value {
		&:last-child {
			color: #e53935;
			font-weight: bold;
			font-size: 16px;
		}
	}
</style>